<#assign ctx = request.contextPath />
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>${Func.getMainCompanyJc()?if_exists}服务人员在线报名</title>
		<link rel="shortcut icon" type="image/x-icon" href="${ctx}/assets/img/ezu.png" />
		<style>
			body, div, ul, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote,button {
				padding:0;
				margin:0; 
				font-family:"微软雅黑", "宋体", "新宋体";
			}
			body {
				width:100%;
				height:100%!important;
			}
		 	.top_box {
		 		color:#fff;
		 		width: 100%;
		 		height: 100px;
		 		font-size: 20px;
		 		text-align: center;
		 		line-height: 100px;
		 		background:#1081e9;
		 	}
		 	#centre {
		 		width:1000px;
		 		margin:40px auto;
		 	}
		 	.rc_tp {
		 		float: left;
		 		width: 1000px;
		 		margin-bottom: 30px;
		 		padding-bottom: 30px;
		 		border-bottom: 1px solid #d6d6d6;
		 	}
		 	.rc_l {
		 		float: left;
		 		width:380px;
		 	}
		 	.rc_l span {
		 		float: left;
		 		margin-bottom: 18px;
		 	}
			.rec-label {
				font-size: 14px;
				float: left;
				width: 90px;
				color:#454545;
				line-height: 32px;
				text-align:right;
				margin-right: 5px;	
			}
			.rec-input {
				width:260px;
				height:32px;
				line-height: 32px;
				margin-right:20px;
				text-indent: 3px;
				border:1px solid #d6d6d6;
			    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
			    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
			    box-shadow: inset 0 1px 4px rgba(0,0,0,.10);
			}
			.rec-choose {
				width:260px;
				height:32px;
				padding: 4px 0;
				margin-right:20px;
				border:1px solid #d6d6d6;
			    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
			    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
			    box-shadow: inset 0 1px 4px rgba(0,0,0,.10);
			}
			.rc_r {
				float: right;
			}
			.theme-label {
				float:left;
				text-align:right;
				color:#454545;
				line-height:32px;
				margin-right: 5px;
			}
			.theme-input {
				width:520px;
				height:190px;
				float:left;
				text-indent:3px;
				border:1px solid #d6d6d6;
			    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
			    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
			    box-shadow: inset 0 1px 4px rgba(0,0,0,.10);
			}
			.rec-btn input {
				cursor: pointer;
				width:500px;
				height:50px;
				border:none;
				color:#fff;
				font-size:18px;
				border-radius:3px;
				margin-top: 40px;
				margin-left:-90px;
				font-family:"微软雅黑", "宋体", "新宋体";
				background:#1081e9;
			}
			.tp-l-tx{
				float:left;
				margin-right:40px;
			}
			.tp-l-tx h1 {
				color:#454545;
				font-size:16px;
				font-family:"微软雅黑";
			}
			.tp-tx {
				width:220px;
				height:220px;
				margin-top:10px;
				border:1px solid #eaeaea;
			}
			.tp-btn a {
				color:#666;
				width:220px;
				height:42px;
				font-size:18px;
				display:block;
				font-family:"微软雅黑";
				line-height:42px;
				text-align:center;
				margin-top:15px;
				text-decoration:none;
				background:url(${ctx}/assets/img/ub_btn.png) no-repeat;
			}
			.tp-btn a:active {
				border-radius:3px;
				box-shadow:inset 1px 1px 2px #d0d0d0;
				background:url(${ctx}/assets/img/active_tp.png) no-repeat;
			} 	
			.rc_tp p {
				color:#454545;
				line-height: 28px;
				font-size: 16px;
				margin-top: 28px;
			}
		</style>
	</head>
	<body>
		<!--top-->
		<div class="top_box">
			<h1>${Func.getMainCompanyJc()?if_exists}服务人员在线报名</h1>
		</div>
		<!--top-->

        <!--conten-->
        <div id="centre">

	    <div class="clear"></div>     
            
    	<div class="rec-con">
			<form id="submit_form">
				<div class="rc_tp">
					
					<div class="tp-l-tx">
				    	<h1>服务人员照片(大小200×200)</h1>
				        <div class="tp-tx" id="photoImg_div"><img id="photoImg" src="${ctx}/assets/img/tx_img.png" width="220" height="220"></div>
				        <div class="tp-btn"><a href="javascript:;" id="photolocalsnap">上传头像</a></div>
				        <input style="display:none;" type="file" name="pic1" id="photoFile">
				        <input type="hidden" id="photo" name="photo">
				    </div>
				    
					<div class="tp-l-tx">
				    	<h1>驾驶证照片(大小550×200)</h1>
				        <div class="tp-tx" id="licenseImg_div" style="width:520px;"><img id="licenseImg" src="${ctx}/assets/img/cert_img.png" width="520" height="220"></div>
				        <div class="tp-btn"><a href="javascript:;" id="licenselocalsnap">上传驾驶证照片</a></div>
				    	<input style="display:none;" type="file" name="pic1" id="licenseFile">
				        <input type="hidden" id="license" name="license">
				    </div> 
				    
				    <p>仅支持JPG、GIF、PNG、BMP图片，头像大小150Kb以内</p>
					
				</div>
				<div class="rc_info">
					<div class="rc_l">
						<span>
		                	<label class="rec-label" for="typeahead"><font color="red">*</font>姓 名：</label>
		                	<input class="rec-input" type="text" id="realname" name="realname" />
						</span>
						<span>
		                	<label class="rec-label" for="typeahead"><font color="red">*</font>身份证号码：</label>
		                	<input class="rec-input" type="text" id="idCard" name="idCard" />
						</span>
						<span>
		                	<label class="rec-label" for="typeahead"><font color="red">*</font>联系电话：</label>
		                	<input class="rec-input" type="text" id="phone" name="phone" />
						</span>
						<span>
		                	<label class="rec-label" for="typeahead">介 绍 人：</label>
		                	<input class="rec-input" type="text" id="introducer" name="introducer" />
						</span>	
					</div>
					<div class="rc_r">
				         <div class="theme-group">
				           <label class="theme-label" for="typeahead">个人介绍：</label>
				           <textarea class="theme-input" maxlength="2000" id="memo" name="memo"></textarea>
				         </div>
					</div>
		         </div>
		         
				 <div class="rec-btn">
		         	<input id="submit_button" type="button" value="提交" />
		         </div>
		         
			</form>
	    </div>                                       
            
        </div>
        <!--conten-->
		<script src="${ctx}/assets/js/jquery-1.11.0.min.js"></script>
		<script src="${ctx}/assets/js/ajaxfileupload.js"></script>
		<script type="text/javascript" language="javascript">
			var hassubmit=false;
			$(document).ready(function(){
			
			    $("#submit_button").click(function(){
			    	
			    	if(hassubmit){
						return false;
					}
				  
			    	if($.trim($("#realname").val())==''){
			    		alert("请填写您的姓名");
			    		return false;
			    	}
			    	
			    	if($.trim($("#idCard").val())==''){
			    		alert("请填写您的身份证");
			    		return false;
			    	}
			    	
			    	if($.trim($("#phone").val())==''){
			    		alert("请填写您的电话号码");
			    		return false;
			    	}
			    	
			    	var isphone=/^\+?\d{3,13}(\-?(\d{6,8}?))?(\-?(\d{4,8}?))*$/; 
					if (!isphone.test($("#phone").val())){
						alert("电话号码格式不正确");
						return false;
					}
			    	
			    	hassubmit=true;
					
					$.post("${ctx}/web/v1/driverApply",$('#submit_form').serialize(),function(data){
				        if(data.success){
				            alert("您的申请已提交，请等待审核");
				            window.close();
				        } else {
				            alert(data.message);
				            hassubmit=false;
				        }
					},'json');
			    	
				});
				
				 //本地头像上传
				$('#photolocalsnap').click(function(){
				 	$('#photoFile').click();
				});
				$(document).on('change','#photoFile',function(){
					if($.trim($(this).val())){
						$("#photolocalsnap").html("上传中...");
						$("#photolocalsnap").attr("disabled",true);
					 	$.ajaxFileUpload({
			                url:'${ctx}/common/uploadDriverPhoto',
			                secureuri:false,
			                fileElementId:'photoFile',
			                dataType: 'json',
			                success: function (result, textStatus) {
			                	if(result.success){
			                		$("#photolocalsnap").html("上传头像");
			            			$("#photolocalsnap").attr("disabled",false);
			            			
			            			$("#photoImg").remove();
			            			$("#photoImg_div").html('<img id="photoImg" width="220" height="220" src="${ctx}/upload/driver/'+result.url+'"/>');
			            			
			            			$("#photo").val(result.url);
			                	}
			                	else{
			                		alert(result.msg);
			                		$("#photolocalsnap").html("上传头像");
			            			$("#photolocalsnap").attr("disabled",false);
			                	}
			                }
			            });
					}
				});
				
				//本地驾驶证上传
				$('#licenselocalsnap').click(function(){
				 	$('#licenseFile').click();
				});
				$(document).on('change','#licenseFile',function(){
					if($.trim($(this).val())){
						$("#licenselocalsnap").html("上传中...");
						$("#licenselocalsnap").attr("disabled",true);
					 	$.ajaxFileUpload({
			                url:'${ctx}/common/uploadLicense',
			                secureuri:false,
			                fileElementId:'licenseFile',
			                dataType: 'json',
			                success: function (result, textStatus) {
			                	if(result.success){
			                		$("#licenselocalsnap").html("上传驾驶证照片");
			            			$("#licenselocalsnap").attr("disabled",false);
			            			
			            			$("#licenseImg").remove();
			            			$("#licenseImg_div").html('<img id="licenseImg" width="520" height="220" src="${ctx}/upload/license/'+result.url+'"/>');
			            			
			            			$("#license").val(result.url);
			                	}
			                	else{
			                		alert("上传失败");
			                		$("#photolocalsnap").html("上传驾驶证照片");
			            			$("#photolocalsnap").attr("disabled",false);
			                	}
			                }
			            });
					}
				});
			    
			});
		</script>
	</body>
	
</html>
